<template>
    <div class="main-page">
        <div class="main-container">
            <slider :content='sliderImgs'></slider>
            <div class="new-user" @click="toEgg">
                <img src="http://palk082f3.bkt.clouddn.com/image/main/new_user.jpg" alt="">
            </div>
            <div class="main-classify main-one" v-if="theme == 1">
                <div class="left">
                    <img :src="labelList[0]['image_url']" alt="">
                </div>
            </div>
            <div class="main-classify main-two" v-if="theme == 2">
                <div class="left">
                    <img :src="labelList[0]['image_url']" alt="">
                </div>
                <div class="right">
                    <img :src="labelList[1]['image_url']" alt="">
                </div>
            </div>
            <div class="main-classify main-three" v-if="theme == 3">
                <div class="left">
                    <img :src="labelList[0]['image_url']" alt="">
                </div>
                <div class="right">
                    <img :src="labelList[1]['image_url']" alt="">
                    <img :src="labelList[2]['image_url']" alt="">
                </div>
            </div>
            <div class="user-show" v-if="userShow.length > 0">
                <!-- <swiper :options="swiperOption" ref="mySwiper">
                    <swiper-slide  v-for="(item,index) in userShow" :key="index" @click="toProductDetail(item['goods_id'])">
                        <div class="user-show-detail">
                            <div class="user-avatar">
                                <img :src="item.headimgurl" alt="">
                            </div>
                            <div class="detail">
                                <span class="detail-name">{{item.nickname}}</span>
                                <div class="detail-des">
                                    刚刚买了<span>{{item.name}}</span>
                                </div>
                            </div>
                            <div class="arrow">
                                <img src="~assets/icons/arrow.png" alt="">
                            </div>
                        </div>
                    </swiper-slide>
                </swiper> -->
                <mt-swipe :auto="3000" :speed="400">
                    <mt-swipe-item v-for="(item,index) in userShow" :key="index">
                        <div class="user-show-detail">
                            <div class="user-avatar">
                                <img :src="item.headimgurl" alt="">
                            </div>
                            <div class="detail">
                                <span class="detail-name">{{item.nickname}}</span>
                                <div class="detail-des">
                                    刚刚买了<span>{{item.name}}</span>
                                </div>
                            </div>
                            <div class="arrow">
                                <img src="~assets/icons/arrow.png" alt="">
                            </div>
                        </div>
                    </mt-swipe-item>
                </mt-swipe>
            </div>
            <!-- <div class="user-show">
                <div class="user-show-box" :style="{translate:userShowAnimation}">
                    <div class="user-show-detail" v-for="(item,index) in userShow" :key="index">
                        <div class="user-avatar">
                            <img :src="item.avatar" alt="">
                        </div>
                        <div class="detail">
                            <span class="detail-name">{{item.name}}</span>
                            <div class="detail-des">
                                刚刚买了<span>{{item.goods}}</span>
                            </div>
                        </div>
                        <div class="arrow">
                            <img src="~assets/icons/arrow.png" alt="">
                        </div>
                    </div>
                </div>
            </div>   -->
            <div class="product-detail" v-for="(item,index) in realData" :key="index">
                <div class="recommend" v-if="item.typesetting == 0">
                    <div class="recommend-header">
                        <recommend-title :content='item["headTitle"]'></recommend-title>
                    </div>
                    <recommend-card :content='item.goods'></recommend-card>
                </div>
                <div class="activity" v-if="item.typesetting == 2">
                    <div class="activity-title">
                        <recommend-title :content='item["headTitle"]'></recommend-title>
                    </div>
                    <div class="activity-head">
                        <img :src="item['image_url']" alt="">
                    </div>
                    <div class="activity-goods-list">
                        <buy-spree :content='item.goods'></buy-spree>
                    </div>
                </div>
                <!-- <div class="good-goods" v-if="item.typesetting == 1">
                    <recommend-title :content='item["headTitle"]'></recommend-title>
                    <double-goods :content='virtual.hotSaleGoods'></double-goods>
                </div> -->
                <div class="integral-goods" v-if="item.typesetting == 1">
                    <recommend-title :content='item["headTitle"]'></recommend-title>
                    <double-integral :content='item.goods'></double-integral>
                </div>
            </div>
            
            <nothing></nothing>
        </div>
    </div>
</template>

<script>
import slider from '../../public/slider'
import recommendTitle from '../../public/title'
import buySpree from '../../public/buySpree'
import doubleGoods from '../../public/doubleGoods'
import doubleIntegral from '../../public/doubleIntegral'
import recommendCard from '../../public/recommendCard'
import nothing from '../../public/nothing'

import { Swiper } from 'vux'
import virtualData from './virtual'

export default {
    name:'mainPage',
    data(){
        return {
            userShow:[],
            userShowAnimation:'',
            swiperOption: {
                initialSlide:0,
                direction:'horizontal',
                loop: true,
                autoplay:{
                    delay:2000,
                    disableOnInteraction: false
                },
                pagination: '.swiper-pagination',
                speed:500,
                autoHeight: true,
                on:{
                    slideChangeEnd:(swiper) => {
                        swiper.update();
                    },
                    tap(swiper){
                        console.log(swiper);
                    }
                }
            },
            headTitleList:[
                {first:'必', second:'买', third:'好', fourth:'物', title:'有你想要'},
                {first:'热', second:'门', third:'活', fourth:'动', title:'有你想要'},
                {first:'爆', second:'款', third:'热', fourth:'卖', title:'惊喜不断'},
                {first:'火', second:'爆', third:'兑', fourth:'换', title:'0元惊喜'}
            ],
            virtual:virtualData,
            sliderImgs:[],
            theme:3,
            realData:[],
            swiperItemIndex:'',
            labelList:[]
        }
    },
    methods:{
        getSliders(){
            let that = this;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'get', that.$api.mainSliders+1, null, token, function(res){
                // console.log(res);
                if(res.data['error_code'] == 0){
                    that.sliderImgs = res.data['msg'];
                    that.transferUrl(that.sliderImgs);
                }
            })
        },
        getGoodsList(){
            let that = this;
            let token = localStorage.getItem('token');
            let loader = that.loading();
            that.$ajax(that, 'get', that.$api.homeFive+1, null, token, function(res){
                // console.log(res);
                if(res.data['error_code'] == 0){
                    that.realData = res.data['msg'];
                    that.transferLabel(that.realData);
                    that.transferUrl(that.realData);
                    console.log(that.realData);
                }
                loader.close();
            })
        },
        toEgg(){
            this.$router.push('/activity_card');
        },
        getUserShow(){
            let that = this;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'get', that.$api.userShow, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.userShow = res.data.msg;
                }else{
                    that.userShow = [];
                }
            })
        },
        toProductDetail(id){
            let that = this;
            let token = localStorage.getItem('token');
            // that.$ajax(that,)
        },
        getClassifyLabel(){
            let that = this;
            let token = localStorage.getItem('token');
            that.$ajax(that, 'get', that.$api.classifyLabel+0, null, token, function(res){
                if(res.data['error_code'] == 0){
                    that.labelList = res.data.msg;
                    that.transferUrl(that.labelList);
                    that.theme = that.labelList.length;
                }else{
                    that.theme = 0;
                }
            })
        }
    },
    mounted(){
        this.getSliders();
        this.getGoodsList();
        this.getUserShow();
        this.getClassifyLabel();
    },
    activated(){
        this.getUserShow();
    },
    components:{
        slider,
        recommendTitle,
        buySpree,
        doubleGoods,
        doubleIntegral,
        recommendCard,
        nothing,
        Swiper
    }
}
</script>

<style lang='less'>
@rem:100rem;

.main-page{
    width: 750/@rem;
    .main-container{
        width: 100%;
        margin-bottom: 96/@rem;
        .new-user{
            width: 100%;
            height: 218/@rem;
            margin: 8/@rem 0;
            img{
                width: 750/@rem;
                height: 218/@rem;
            }
        }
        .main-classify{
            width: 100%;
            box-sizing: border-box;
            padding: 0 8/@rem;
            display: flex;
            background: #fff;
            .left{
                height: 360/@rem;
                img{
                    width: 366/@rem;
                    height: 360/@rem;
                }
            }
            .right{
                height: 360/@rem;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                margin-left: 6/@rem;
                img{
                    width: 368/@rem;
                    height: 178/@rem;
                }
            }
        }
        .main-one{
            width: 100%;
            .left{
                width: 100%;
                img{
                    width: 750/@rem;
                }
            }
        }
        .main-two{
            width: 100%;
            .left{
                width: 50%;
                img{
                    width: 375/@rem;
                    height: 360/@rem;
                }
            }
            .right{
                width: 50%;
                img{
                    width: 375/@rem;
                    height: 360/@rem;
                }
            }
        }
        .user-show{
            width: 100%;
            height: 126/@rem;
            .user-show-detail{
                width: 100%;
                height: 126/@rem;
                display: flex;
                background: #fff;
                align-items: center;
                position: relative;
                .user-avatar{
                    height: 86/@rem;
                    width: 86/@rem;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                    margin-left: 20/@rem;
                }
                .detail{
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    margin-left: 26/@rem;
                    .detail-name{
                        font-size: 24/@rem;
                        color: #888;
                        margin-bottom: 20/@rem;
                    }
                    .detail-des{
                        font-size: 24/@rem;
                        color: #888;
                        span{
                            color: #333;
                            margin-left: 10/@rem;
                        }
                    }
                }
                .arrow{
                    width: 66/@rem;
                    height: 100%;
                    position: absolute;
                    right: 0;
                    line-height: 126/@rem;
                    img{
                        height: 30/@rem;
                        width: 30/@rem;
                        vertical-align: middle;
                    }
                }
            }
        }
        .recommend{
            width: 100%;
            margin-top: 6/@rem;
        }
        .activity{
            width: 750/@rem;
            overflow: hidden;
            .activity-head{
                width: 100%;
                height: 308/@rem;
                img{
                    width: 750/@rem;
                    height: 308/@rem;
                }
            }
            .activity-goods-list{
                width: 100%;
                padding: 0 3/@rem;
                background: #fdd188;
                padding-bottom: 10/@rem;
            }
        }
        .good-goods{
            width: 100%;
            background: #fff;
        }
        .integral-goods{
            width: 100%;
            background: #fff;
        }
    }
}
</style>
